@use '../../token/colors';
@use '../../token/size';

$jhlite-modules-patch-line-color: colors.$jhlite-global-line-color;
$jhlite-modules-patch-box-radius: colors.$jhlite-global-box-radius;
$jhlite-modules-patch-primary-color: colors.$jhlite-global-primary-color;
$jhlite-modules-patch-applied-module-color: colors.$jhlite-global-applied-module-color;
$jhlite-modules-patch-primary-input-color: colors.$jhlite-global-primary-input-color;
$jhlite-modules-patch-disabled-color: colors.$jhlite-global-disabled-color;
$jhlite-filter-color-field-border: colors.$jhlite-global-color-field-border;
$jhlite-filter-color-field-border-focus: colors.$jhlite-global-color-field-border-focus;
$jhlite-filter-size-field-border: size.$jhlite-global-size-field-border;
$jhlite-filter-size-field-border-focus: size.$jhlite-global-size-field-border-focus;
$jhlite-filter-size-field-radius: size.$jhlite-global-size-field-radius;
$jhlite-filter-font-size: 1rem !default;
$jhlite-filter-line-height: 1.5rem !default;
$jhlite-filter-padding: 2px 10px !default;

.jhipster-modules-patch {
  color: var(--jhlite-global-color-text);

  .jhipster-modules-list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &--categories {
      flex-grow: 1;
      padding: 0 15px;
      overflow-y: auto;
    }
  }

  .jhipster-modules-filters {
    display: flex;
    align-items: center;
    margin: 15px 0;
    padding: 0 15px;
    height: 40px;

    &--tags {
      margin-right: 10px;
    }

    &--filter {
      flex-grow: 1;
      border: $jhlite-filter-size-field-border solid $jhlite-filter-color-field-border;
      border-radius: $jhlite-filter-size-field-radius;
      padding: $jhlite-filter-padding;
      line-height: $jhlite-filter-line-height;
      font-size: $jhlite-filter-font-size;

      &:focus {
        outline: none;
        border-color: transparent;
        box-shadow: 0 0 0 $jhlite-filter-size-field-border-focus $jhlite-filter-color-field-border-focus;
      }
    }

    &--displayed-modules-count {
      margin-left: 15px;
      border-radius: 1em;
      background-color: $jhlite-modules-patch-primary-color;
      padding: 3px 1em;
      color: #fff;
    }
  }

  .jhipster-module-category {
    &--name {
      font-size: 1.4em;
      font-weight: 800;
    }
  }

  .jhipster-module {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid $jhlite-modules-patch-line-color;
    border-radius: $jhlite-modules-patch-box-radius;

    &.selected {
      background-color: $jhlite-modules-patch-primary-color;
      color: var(--jhlite-white);
    }

    &--content {
      flex-grow: 1;
      cursor: pointer;
      padding: 5px 10px;
    }

    &--content.not-selected {
      display: flex;
    }

    &--content.applied {
      background-color: $jhlite-modules-patch-applied-module-color;
    }

    &--tags.not-selected,
    &--description.not-selected {
      display: none;
    }

    &--tags.selected {
      display: flex;
      margin: 5px 0;
    }

    &--description.selected {
      display: block;
    }

    &--tag {
      margin-right: 7px;
      border-radius: 1em;
      background-color: $jhlite-modules-patch-primary-color;
      padding: 0 0.5em;
      font-style: italic;
    }

    &--slug {
      font-weight: bold;
    }

    &--apply-button {
      border: 0;
      border-left: 1px solid $jhlite-modules-patch-line-color;
      background-color: transparent;
      padding: 0 10px;
      color: $jhlite-modules-patch-primary-input-color;
      font-size: 1.5em;
      font-weight: bold;
    }

    &--apply-button:disabled {
      color: $jhlite-modules-patch-disabled-color;
    }
  }
}
